<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backTo()"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">我的银行卡</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" src="/static/bg05.png" mode="widthFix"></image>
			<view class="bg_content">
				
				
				<block v-for="(item,index) in list" :key="index">
					<view class="bank_list" :class="'bank_list0'+item.img_code">
						<view class="name_box">
							<view class="icon">
								<image :src="'/static/bank0'+item.img_code+'.png'" mode="widthFix"></image>
							</view>
							<view class="name">{{item.bank_name}}</view>
							<view class="menu" @click="to_unbind(item.id)">解绑</view>
						</view>
						<view class="num_box">
							<view class="num">•••• •••• •••• {{item.bank_code|end_code}}</view>
							<view class="text">借记卡</view>
						</view>
						<view class="bank_img">
							<image :src="'/static/bank0'+(parseInt(item.img_code)+4)+'.png'" mode="widthFix"></image>
						</view>
					</view>
				</block>
				
				<block v-if="empty_show">
					<view style="margin-top: 20vw;" v-if="list.length==0">
						<u-empty mode="data" text="暂无数据" iconSize="120" ></u-empty>
					</view>
				</block>
				
				
			<!-- 	<view class="bank_list bank_list02">
					<view class="name_box">
						<view class="icon">
							<image src="/static/bank02.png" mode="widthFix"></image>
						</view>
						<view class="name">中国建设银行</view>
						<view class="menu">解绑</view>
					</view>
					<view class="num_box">
						<view class="num">•••• •••• •••• 6688</view>
						<view class="text">借记卡</view>
					</view>
					<view class="bank_img">
						<image src="/static/bank06.png" mode="widthFix"></image>
					</view>
				</view> -->
				
		<!-- 		<view class="bank_list bank_list03">
					<view class="name_box">
						<view class="icon">
							<image src="/static/bank03.png" mode="widthFix"></image>
						</view>
						<view class="name">中国农业银行</view>
						<view class="menu">解绑</view>
					</view>
					<view class="num_box">
						<view class="num">•••• •••• •••• 6688</view>
						<view class="text">借记卡</view>
					</view>
					<view class="bank_img">
						<image src="/static/bank07.png" mode="widthFix"></image>
					</view>
				</view> -->
				<view style="height:10vh;">
					
				</view>
				
			</view>
			
		
		</view>
		
		<view class="confirm" :data-url="'/pages/personalcenter/bank/add'" @click="gotopage">添加银行卡</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				scrrol:false,
				info:'',
				empty_text : '暂无银行卡',
				load_type : 'more',
				empty_show : 0,
				list : [],
				select:0,
				
			}
		},
		onPageScroll: function(Object) {
			if (Object.scrollTop > 28) {
				this.scrrol = true;
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
			}
		},
		filters:{
			 end_code(car_code){
				let code = uni.$u.trim(car_code, 'all');
				if(code.length >= 4){
					 code = code.slice(-4);
				}
				return code;	
			}
		},
		onLoad() {
			uni.$on('bank_add',()=>{
				 this.pageinit();
			})
			this.loadData();
		},
		methods: {
			del_list(index,msg) {
				setTimeout(() => {
					this.list.splice(index, 1);
					uni.hideLoading();
					this.showMsg(msg);
				}, 600);
			},
			to_unbind(id){
				uni.showModal({
					title: '提示',
					content: '确认解绑吗?',
					success:  (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '解绑中'
							});
							 let url = this.site_url + 'api/auth/member/unbind_bank?id='+id;
							 this.areq(url).then(rs=>{
								 if(rs.code == 1){
									 let index = this.list.findIndex(val => val.id === id);
									  let msg = '解绑成功';
									 this.del_list(index,msg);
								 }else{
									  uni.hideLoading();
									 this.showMsg(rs.msg)
								 }
								 
							 })
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			},
			setRule(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			pageinit(){
				this.page = 1;
				this.list = [];
				this.load_type = 'more';
				this.empty_show = 0;
				this.loadData();
			},
			loadData(){
				if(this.load_type == 'loading' || this.load_type == 'no_more'){
					return;
				}
				let url = this.site_url + 'api/auth/member/bank_list?page='+this.page;
				this.areq(url).then(res=>{
					this.empty_show = 1;
					 if(res.code == 1){
						 this.page++; 
						 this.load_type = 'more';
						 this.list = [...this.list,...res.data];
					 }else{
						this.load_type = 'no_more';
					}
					
				})
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},

		},
	
		
		
	}
</script>

<style>
	
	.header{
		background-color: transparent !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #F9E9E3 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.bank_list{
		width: 100%;
		background-color: #FF535B;
		padding: 5vw 4%;
		position: relative;
		border-radius: 3vw;
		margin-top: 4%;
	}
	
	.bank_list02{
		background-color: #4392F7;
	}
	
	.bank_list03{
		background-color: #0DC39E;
	}
	
	.bank_list .name_box{
		display: flex;
		align-items: center;
	}
	
	.bank_list .name_box .icon{
		width: 8vw;
		margin-right: 2vw;
	}
	
	.bank_list .name_box .icon image{
		width: 100%;
	}
	
	.bank_list .name_box .name{
		font-size: 4vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
	}
	
	.bank_list .name_box .menu{
		width: 12vw;
		font-size: 3.8vw;
		height: 8vw;
		color: #fff;
		border: 1px solid #fff;
		border-radius: 8vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.bank_list .num_box{
		width: 100%;
		padding-left: 10vw;
		margin-top: 3vw;
	}
	
	.bank_list .num_box .num{
		font-size: 6vw;
		color: #fff;
		font-weight: bold;
	}
	
	.bank_list .num_box .text{
		font-size: 3.5;
		color: #fff;
		margin-top: 3vw;
	}
	
	.bank_list .bank_img{
		width: 30vw;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	
	.bank_list .bank_img image{
		width: 100%;
	}
	
	
	
</style>
